import { createPageTemplateConfig, PageTemplate } from '@/components';
import useIntlCustom from '@/hooks/useIntlCustom';
import { DownloadOutlined, UploadOutlined } from '@ant-design/icons';
import { Button, message, Upload } from 'antd';
import { getPageConfig, type CallListRecord } from './pageConfig';

const CallListPage = () => {
  // 使用 useIntlCustom Hook
  const { translate } = useIntlCustom();

  // 在组件内部调用，传入 translate 函数
  const pageConfig = getPageConfig(translate);

  // 统一的操作处理函数
  const handleAction = (actionType: string, record: CallListRecord) => {
    console.log('Action triggered:', actionType, record);
  };

  // 模板下载处理
  const handleTemplateDownload = () => {
    message.success(translate('dataManage', 'templateDownloading'));
    // TODO: 实现模板下载逻辑
    console.log('下载模板');
  };

  // 模板上传处理
  const handleTemplateUpload = (file: any) => {
    const uploadingText = translate('dataManage', 'templateUploading').replace('{fileName}', file.name);
    message.success(uploadingText);
    // TODO: 实现模板上传逻辑
    console.log('上传文件:', file);
    return false; // 阻止自动上传
  };

  // 使用配置构建器创建页面配置
  const templateConfig = createPageTemplateConfig<CallListRecord>()
    .setSearchConfig({
      fields: pageConfig.searchFields,
    })
    .setTableConfig({
      columns: pageConfig.columns,
      rowKey: 'paramIndex',
      props: {
        scroll: { x: 1000 },
        size: 'middle',
      },
    })
    .setFormConfig({
      fields: pageConfig.formFields,
    })
    .setActionConfig({
      permissions: {
        create: false,
        update: false,
        delete: true,
        view: false,
      },
      onAction: handleAction,
    })
    .setBatchActionConfig({
      enabled: false,
      renderCustom: () => (
        <>
          <Button type="primary" icon={<DownloadOutlined />} onClick={handleTemplateDownload}>
            {translate('dataManage', 'templateDownload')}
          </Button>
          <Upload accept=".xlsx,.xls" showUploadList={false} beforeUpload={handleTemplateUpload}>
            <Button type="primary" icon={<UploadOutlined />}>
              {translate('dataManage', 'templateUpload')}
            </Button>
          </Upload>
        </>
      ),
    })
    .setCrudConfig(pageConfig.crudConfig)
    .build();

  return <PageTemplate<CallListRecord> {...templateConfig} />;
};

export default CallListPage;
